<template>
  <uni-popup ref="printPopup" background-color="#fff" :is-mask-click="false" @change="change">
    <view class="popup_print">
      <view class="popup_header">
        <uni-nav-bar :shadow="true" :border="false" title="打印" rightIcon="close" @clickRight="close">
          <uni-steps :options="stepList" :active="stepActive"></uni-steps>
        </uni-nav-bar>
      </view>
      <view class="popup_content">
        <viewStep1 v-show="stepActive===0" @close="close"/>
        <viewStep2 v-show="stepActive===1" @close="close"/>
      </view>
      <view class="popup_footer">
        <button @click="handleStep('prev')">上一步</button>
			  <button type="primary" @click="handleStep('next')">下一步</button>
      </view>
    </view>
  </uni-popup>
</template>
<script>
import viewStep1 from './step1.vue'
import viewStep2 from './step2.vue'
export default {
		props:{},
		emits:[],
    components:{
      viewStep1,
      viewStep2
    },
		data() {
			return {
        type:'bottom',
        stepActive:0,
        stepList:[
          {title:'链接蓝牙'},
          {title:'确认打印'},
        ]
			};
		},
		methods:{
			open(options){
        const {type} = options || {}
        this.type = type
				this.$refs['printPopup'].open(type || 'bottom')
			},
      close(){
        this.$refs['printPopup'].close()
      },
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
      handleStep(type){
        if(type === 'next'){
          if(this.stepActive<(this.stepList.length - 1)){
            this.stepActive++
          }
        }else{
          if(this.stepActive>0){
            this.stepActive--
          }
        }
      },
		}
	}
</script>
<style lang="scss" scoped>
.popup_print{
  width: 100%;
  height: 75vh;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  .popup_header{
    /deep/ .uni-navbar__header{
      height: 120rpx !important;
      .uni-navbar__header-container {
        display: flex;
        align-items: center;
      }
      .uniui-close{
        color: #999 !important;
      }
    }
  }
  .popup_content{
    width: 100%;
    height: calc(100% - 120rpx - 100rpx);
    padding: 30rpx;
    overflow-y: auto;
  }
  .popup_footer{
		width: 100%;
    height: 100rpx;
		box-shadow: 0 1px 6px #ccc;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
		line-height: 34rpx;
		text-align: justify;
		button{
			min-width: 140rpx;
			height: 60rpx;
			font-size: 24rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: unset;
			margin-right: unset;
			&+button{
				margin-left: 20rpx;
			}
		}
  }
}

</style>